from dash import html, dcc

STYLE_1 = {'color': 'rgb(13, 103, 180)'}
STYLE_2 = {'color': 'rgb(255, 153, 51)'}
STYLE_3 = {'color': 'rgb(255, 153, 51)', "margin-left": "1rem"}

markdown_code_text = '''
```
from dash import Dash, dcc, html, Input, Output
app = Dash(__name__)
app.layout = html.Div([
    html.H6("更改文本框中的值以查看回调的作用!"),
    html.Div([
        "输入: ",
        dcc.Input(id='my-input', value='初始化值', type='text')
    ]),
    html.Br(),
    html.Div(id='my-output'),

])
@app.callback(
    Output(component_id='my-output', component_property='children'),
    Input(component_id='my-input', component_property='value')
)
def update_output_div(input_value):
    return f'输出: {input_value}'

if __name__ == '__main__':
    app.run_server(debug=True)
```
'''

dash_base_html = html.Div(
    [
        html.P(html.Strong('一、Dash应用程序布局', style=STYLE_1)),
        html.Hr(),
        html.P('Dash是声明式的, 通过关键字描述组件, 我们通过对dash.layout传值来设置Dash应用的布局样式, 一个组件的层次树, '
               '官方提供了很多开源组件库, 通过这些组件, 我们可以轻松地布局我们的应用程序, '
               '当然我们也可以自己通过HTML、JavaScript、CSS封装组件, '
               '下面我们来介绍一些官方提供的组件: ',
               style=STYLE_2),
        html.P('1.Dash HTML Components: 提供了所有的HTML标签和关键字参数, 用来设置HTML的属性；',
               style=STYLE_3),
        html.P('2.Dash Core Components: 提供了很多高级的组件, 例如交互式高阶组件库，是由JavaScript、HTML和CSS编写，并由React.js库生成，其语法类似Plotly；',
               style=STYLE_3),
        html.P('3.Dash DataTable: 一个交互表组件，设计用于查看、编辑和探索大型数据集；',
               style=STYLE_3),
        html.P('4.Dash Bio: 一套生物信息学组件，可以更简单地分析和可视化生物信息学数据，并在Dash应用程序中与它们交互；',
               style=STYLE_3),
        html.P('5.Dash DAQ: 包含一组健壮的控件，使它更简单地将数据采集和控件集成到Dash应用程序中；',
               style=STYLE_3),
        html.P('6.Dash Image Annotations: 该组件提供了如何在绘图时使用不同的绘图工具注释图像，以及如何在Dash应用程序中使用这些注释；',
               style=STYLE_3),
        html.P('7.Dash Canvas: 使用Dash进行图像注释和图像处理的模，提供了用于在图像上绘图和注释的DashCanvas对象，以及一组使用注释处理图像的实用函数，'
               'Dash Canvas可用于需要用户与图像交互的各个领域，如工业中的质量控制、生命和医学科学中细胞或器官的识别和分割、材料和地球科学中的阶段量化、机器学习训练集的构建等；',
               style=STYLE_3),
        html.P('8.Dash Slicer: 提供了一种通过一维切片来可视化3D图像数据的简单方法。可以链接同一数据的多个视图，以帮助导航。还支持蒙版叠加；',
               style=STYLE_3),
        html.P('9.Dash Cytoscape: 一个图形可视化组件，用于创建易于定制的、高性能的、交互式的和基于web的网络。它扩展和渲染Cytoscape.js，并提供与Dash布局和回调的深度集成，使强大的网络能够与Dash组件的丰富集合结合，以及已建立的计算生物学和网络科学库；',
               style=STYLE_3),
        html.P('10.Dash VTK: Dash VTK旨在将VTK/vtk.js可视化集成到Dash框架中；',
               style=STYLE_3),
        html.P('11.Dash VTK: Dash VTK旨在将VTK/vtk.js可视化集成到Dash框架中；',
               style=STYLE_3),
        html.P('12.Dash Bootstrap Components: 是Plotly Dash的Bootstrap组件库，它使构建具有复杂、响应式布局的风格一致的应用变得更容易；',
               style=STYLE_3),
        
        html.P(html.Strong('二、Dash中的回调函数', style=STYLE_1)),
        html.Hr(),
        html.P('Dash回调函数的理解：当一个输入组件的属性发生变化时，Dash会自动调用这些函数，以更新另一个组件(输出组件)的某些属性，以下是一个简单的例子：',
               style=STYLE_2),
        dcc.Markdown(markdown_code_text),

        html.P(html.Strong('三、Dash的交互式信息可视化', style=STYLE_1)),
        html.Hr(),
        html.P('Dash核心组件模块包含一个名为dcc.Graph的图形组件，Graph使用开源的plotly.js JavaScript图形库呈现交互式数据可视化。',
               style=STYLE_2),
        html.P('plotly.js支持超过35种图表类型，并以矢量质量的SVG和高性能的WebGL呈现图表；',
               style=STYLE_3),
        html.P('dcc.Graph组件都可以通过用户交互更改的属性，当将鼠标悬停在点上、单击点或选择图中点的区域时，这些属性会更新，属性中的任何一个都可以通过回调函数更新；',
               style=STYLE_3),

        html.P(html.Strong('四、Dash在回调函数之间共享数据', style=STYLE_1)),
        html.Hr(),
        html.P('Dash的核心原则之一，即Dash回调决不能在其作用域之外修改变量，修改任何全局变量都是不安全的，本节提供了一些在回调之间共享状态的替代模式。',
        style=STYLE_2),
        html.P('1. 使用dcc.Store将共享数据存储在浏览器中，具体用法我们后续再介绍；',
               style=STYLE_3),
        html.P('2. 提前计算并聚合数据，在许多情况下，你的应用程序将只显示处理数据的子集或聚合。在这些情况下，可以在数据处理回调中预计算聚合，并将这些聚合传输到剩余的回调中；',
               style=STYLE_3),
        html.P('3. 缓存和信号，这种方案我们后续做实际应用时再介绍；',
               style=STYLE_3),
        html.P('4. 服务器上基于用户的会话数据，这种方案我们后续做实际应用时再介绍；',
               style=STYLE_3),
    ]
)